zozo

Hi, I'm a bit rusty with gsap, and need some help. I did a bit of vanilla js to pin a div for a moment, and it's working fine, (even though sometime it's a bit laggy on the first scroll) but since I'm using gsap and scroll trigger for something else on the same page, I though it would be better to use it too here, but I'm not sure how to do it. The pinned div has an absolute position, with a 50% top and transform translateY -50%, and when you scroll it push is it down so it look fixed. The cover_parallax div has a 200vh Height, so when it's scrolled to the bottom of the warper it stop. here is the code : window.addEventListener('scroll', checkContainerVisibility); ////////////////////// function toggleFixed() { isFixed = !isFixed; if (isFixed) { // Set initial position when becoming fixed updateFixedPosition(); window.addEventListener('scroll', updateFixedPosition); window.addEventListener('resize', updateFixedPosition); } else { // Clean up when no longer fixed window.removeEventListener('scroll', updateFixedPosition); window.removeEventListener('resize', updateFixedPosition); } } // Function to update the position of the fixed element based on scroll and resize function updateFixedPosition() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; // Adjust the top position of the fixed element content.style.top = `calc( 50% + ${scrollTop}px`; } function checkContainerVisibility() { var bounding = cover_parallax.getBoundingClientRect(); if ( bounding.bottom < 0 ) { cover_parallax.classList.add('annimeover'); } else { cover_parallax.classList.remove('annimeover'); } } How would you do the same with a gsap scroll trigger ?

Thanks guys ! So fast, you rock !!!! Yeah I reused an old file, I should def update to the gsap.

Hi there, I have this weird thing going on with the scale. The women is scaled down, and it's not really smooth as you can see on the code pen. Can you help me out please ? What am I doing wrong ? Thanks,

ok, good to know, thanks

thanks !

Hi Again, I have kind of the same problem with a Timeline that start on scrolltrigger. Could you give an exemple of the same idea with a timeline please ? Best regards

Hi, What is the best practice for gsap with barba ? Should I kill gsap annim on beforeEnter hook ? Thanks, Best regards

That make sens. thanks !

Hi nicofonseca, Thanks ! that was quick ! Should I use a time line controlled by a scroll trigger instead to improve performance like here ?

Hi there, I have an issue with this. It's working fine in Chrome, FF, but not in safari. It should scale the svg part on scroll, but in safari it's .. weird. It's very very slow, and not really reacting to scrolltrigger. Can any one help ? Thanks, Best regards, Romain

I think I had a conflict with nuxt-gsap-module which I was not using any way. I removed it, and now when I install it again I get yarn add ./gsap-bonus.tgz yarn add v1.22.10 [1/4] ? Resolving packages... [2/4] ? Fetching packages... [3/4] ? Linking dependencies... [4/4] ? Building fresh packages... success Saved 1 new dependency. info Direct dependencies └─ gsap@3.6.0 info All dependencies └─ gsap@3.6.0 ✨ Done in 6.47s. I still see gsap 3.6.0. is it normal ? how can I check the update is done ? Thanks !

Hi Guys, Cool Thanks ! I have this error though : warning Pattern ["gsap@./gsap-bonus.tgz","gsap@^3.6.0"] is trying to unpack in the same destination "/Users//Library/Caches/Yarn/v6/npm-gsap-3.6.0-c52bb0925db5dd09b47b83991edac6eedab8a2f5/node_modules/gsap" as pattern ["gsap@./gsap-bonus.tgz"]. This could result in non-deterministic behavior, skipping. [3/4] ? Linking dependencies... [4/4] ? Building fresh packages... success Saved 1 new dependency. info Direct dependencies └─ gsap@3.6.0 info All dependencies └─ gsap@3.6.0 I tried to to do a yarn remove first but It didn't work. How should I proceed ? Thanks !

Hi Guys, I'm using Nuxt, can I have the 3.6.1 in tgz format please ? My gsap-bonus.tgz is only 3.6.0.

Hi Guys, It seem to fix my problem in nuxt. I did updated it by just copy and past, but how can I make a true update it seems to fix my problem if i just replace 3.6.0 with 3.6.1 in my nod module. When will I be able to download the package 3.6.1 ?

Hi Akapowl, I Fond the solution. Yes you're right, I wasn't writing it right, but I needed to import Back too. Thanks import { gsap, Back } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; if (process.client) { gsap.registerPlugin(ScrollTrigger); } tl_logo: gsap.timeline({paused:true}) this.tl_logo.from('#main-triangle', {rotation:-27, scale: 0, opacity: 0, transformOrigin:"50% 50%", ease: Back.easeOut, duration: 5})